<template>
  <div>
    <div class="padding-box">
      <box-border style="padding: 20px;border-radius: 3px;">
        <sz-search-form
          ref="search-form"
          :form-data="searchFormData"
          :form-items="searchFormItems"
          :form-style="searchFormStyle"
        >
          <template v-slot:btn-wrap>
            <el-button
              @click="resetForm('search-form')"
              :loading="searchLoading"
              type="primary"
              >重置
            </el-button>
            <el-button @click="search" :loading="searchLoading" type="primary"
              >查询
            </el-button>
            <el-button type="primary" @click="exportDown">导出</el-button>
          </template>
        </sz-search-form>
      </box-border>
      <box-border style="padding: 20px;border-radius: 3px;margin-top: 10px;">
        <sz-table-list
          :table-data="tableData"
          :table-index="true"
          :table-items="tableItems"
          :table-style="tableStyle"
          :table-btns="tableBtns"
          :loading="searchLoading"
          :table-page="tablePage"
          @search-action="doGetList"
          @show-sign-image="showSignImage"
        >
        </sz-table-list>
      </box-border>
      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
      >
        <img width="100%" :src="dialogImageUrl" alt="未找到该图片资源" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "instanceAccount",
  data() {
    return {
      searchLoading: false,
      searchFormData: {
        flowId: ""
      },
      tablePage: {
        pageSize: 10,
        pageIndex: 0,
        total: 10
      },
      searchFormStyle: {
        itemSpan: 8
      },
      searchFormItems: [],
      tableItems: [],
      tableData: [],
      tableStyle: {},
      tableBtns: [{ label: "详情", function: this.handleUpdate }],
      largeCategoryList: [],
      centreCategoryList: [],
      flowId: "",
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },

  created() {},
  beforeRouteUpdate(to, from, next) {
    //next方法使URL显示正常
    next();
    //数据改变的方法（此处为自定义的数据改变方法）
    this.initData();
  },
  mounted() {
    window.onresize = () => {
      this.getItemSpan();
    };
    this.getItemSpan();
    this.initData();
  },
  methods: {
    showSignImage(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    /**
     * 描述：计算查询条件的span
     * 时间： 2020/11/9
     */
    getItemSpan() {
      if (window.innerWidth > 1550) {
        this.searchFormStyle.itemSpan = 6;
      } else if (window.innerWidth < 1024) {
        this.searchFormStyle.itemSpan = 12;
      } else {
        this.searchFormStyle.itemSpan = 8;
      }
    },
    /**
     * 描述：初始化数据，根据流程id
     * 时间： 2020/11/6
     */
    async initData() {
      this.flowId = this.$route.query.flowId;
      this.searchFormData = {};
      this.searchFormData.flowId = this.flowId;
      this.searchFormItems = [];
      this.tableItems = [];
      await this.API.getWorkflowSearchListByFlowId({
        flowId: this.flowId
      }).then(res => {
        if (res.data) {
          res.data.map(item => {
            let tem = {};
            switch (item.conditionType) {
              case "INPUT":
                tem = {
                  label: item.conditionName,
                  field: item.fieldName + "-" + item.id,
                  type: item.conditionType
                };
                break;
              case "SELECT":
                if (item.sourceType === "DICTIONARY") {
                  let options = [];
                  this.getDictionary(item.conditionData).map(dicItem => {
                    options.push({
                      code: dicItem.keyword,
                      name: dicItem.label
                    });
                  });
                  tem = {
                    label: item.conditionName,
                    field: item.fieldName + "-" + item.id,
                    type: item.conditionType,
                    options: options
                  };
                }
                break;
              case "DATE":
                tem = {
                  label: item.conditionName,
                  field: item.fieldName + "-" + item.id,
                  type: item.conditionType
                };
                break;
            }
            this.searchFormItems.push(tem);
          });
        }
        console.log(11, this.searchFormData);
        this.$nextTick(() => {
          this.search();
        });
      });
    },

    /**
     * 描述：查询
     * 时间： 2020/11/6
     */
    search: function() {
      this.tablePage.pageIndex = 0;
      this.doGetList();
    },

    /**
     * 描述：导出
     * 时间： 2020/11/6
     */
    exportDown() {
      let para = this.transferSearchFormData(this.searchFormData);
      let fileDownload = require("js-file-download");
      this.ExportApi.downloadWorkflowInstanceTableData({ body: para }).then(
        res => {
          console.log(res.headers);
          const disposition = res.headers["content-disposition"];
          console.log(disposition);
          let fileName = this.getFileName(disposition);
          console.log(fileName);
          fileDownload(res.data, fileName);
        }
      );
    },
    /**
     * 描述：获取数据
     * 时间： 2020/11/6
     */
    doGetList: async function() {
      this.searchLoading = true;
      this.tableItems = [];
      this.tablePage.pageIndex = this.tablePage.pageNum;
      const data = this.setSearchFormApiData(
        this.searchFormData,
        this.tablePage
      );
      let para = this.transferSearchFormData(data);
      console.log(para);
      await this.API.getWorkflowInstanceTableDataList({ body: para }).then(
        res => {
          let filedList = res.data.fieldList;
          let pageData = res.data.pageData;
          if (filedList) {
            filedList.map(item => {
              if (item.isShow) {
                let tem = {};
                switch (item.type) {
                  case "TEXT":
                  case "CUSTOM":
                  case "FILE":
                  case "CHECK_BOX":
                  case "CATY":
                    tem = {
                      label: item.showTitle,
                      type: "TEXT",
                      field: item.fieldName,
                      width: item.width ? item.width : "",
                      showOverflowTooltip: true
                    };
                    break;
                  case "DATETIME":
                    tem = {
                      label: item.showTitle,
                      format: item.content,
                      type: item.type,
                      field: item.fieldName,
                      width: item.width ? item.width : "",
                      showOverflowTooltip: true
                    };
                    break;
                  case "RADIO_BOX":
                  case "SIGN_ITEM":
                  case "SIGN":
                    tem = {
                      label: item.showTitle,
                      format: item.content,
                      type: item.type,
                      field: item.fieldName,
                      width: item.width ? item.width : "",
                      showOverflowTooltip: true
                    };
                    break;
                }

                this.tableItems.push(tem);
              }
            });
          }
          if (pageData) {
            this.tableData = pageData.records;
            this.tableData.pageIndex = pageData.current;
            this.tablePage.total = pageData.total;
          }
        }
      );
      this.searchLoading = false;
    },
    /**
     * 描述：查看详情
     * 时间： 2020/11/6
     */
    handleUpdate: async function(row) {
      let taskId = "";
      await this.API.getInstanceFirstTask({ instanceId: row.id }).then(res => {
        console.log(res.data);
        taskId = res.data.id;
      });
      let routeData = this.$router.resolve({
        path: "/workflow/apply",
        query: { flowId: this.flowId, taskId: taskId }
      });
      this.openPage(routeData.href);
    }
  },
  //注销window.onresize事件
  destroyed() {
    window.onresize = null;
  }
};
</script>
<style scoped>
.padding-box {
}
</style>
